<template>
  <Card>
    <div class="title border" style="position: relative">
      <el-badge :value="unreadCount>0?unreadCount:''" :max="99">
        <span>邀请我回答</span>
      </el-badge>

      <span style="position: absolute;right: 10px">
          <el-link v-if="unreadCount>0" icon="el-icon-check" slot="reference" type="primary" @click="readAll"
                   :disabled="loading">全部设已读</el-link>
          <el-link type="success" icon="el-icon-refresh" @click="loadData()" :disabled="loading">刷新</el-link>
      </span>
    </div>
    <Posts v-loading="loading" :topic="topic"></Posts>
  </Card>
</template>

<script>
import api from "@/utils/api";
import utils from "@/utils/utils";

export default {
  name: "Invitation",
  data() {
    return {
      topic: null,
      unreadCount: 0,
      loading: false
    }
  },
  watch: {
    unreadCount(val) {
      this.$emit('unreadCount', val);
    }
  },
  computed: {
    hasData() {
      return this.topic && this.topic.data && this.topic.data.length > 0
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    readAll() {
      let self = this;

      self.$confirm('您确定要全部标记为已读吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.userInvitationReadall().then(res => {
          utils.showMessage(res);
          if (res.code === 1) {
            self.loadData();
          }
        });
      })
    },
    loadData() {
      let self = this;
      self.loading = true;

      api.getUserInvitationCount().then(res => self.unreadCount = res);

      api.getUserInvitationList().then(res => self.topic = res).finally(() => self.loading = false);
    }
  }
}
</script>

<style scoped>

</style>
